<script setup lang='ts'>
import {nextTick, onMounted, reactive} from 'vue';
import {numberApi} from '@/api/controller';
import {ToastWarning, Toastloading, ToastSuccess} from '@/utils/public';
import {getDateArray, getPlayEndTime, getHMMSS} from '@/utils'
import Pagination from "@/components/Pagination/index.vue";
import serachUserid from '@/components/serachUserid/index.vue';
import {ElMessageBox} from "element-plus";

const action = reactive({
  total: 0,
  list: [] as any[],
  dateArr: getDateArray('time') as Array<number>,
  dialogFormVisible: false,
})
const listQuery = reactive({
  page: 1,
  limit: 20,
  uuid: '',
  user_id: '',
})
const getList = async () => {
  const loading = Toastloading()
  const res = await numberApi.getForbidIpList({
    page: listQuery.page,
    limit: listQuery.limit,
  })
  loading.close()
  const {data = [], total = 0} = res.data || {}
  action.total = total
  let list = data.list || []
  const ipGroups = list.reduce((acc: any, curr: any) => {
    const ip = curr.ip;
    if (!acc[ip]) {
      acc[ip] = {
        ip: ip,
        users: []
      };
    }
    if (curr.user) {
      let user = curr.user;
      user.ip=ip;
      acc[ip].users.push(user);
    }
    return acc;
  }, {});

  action.list = Object.values(ipGroups).map((group: any) => ({
    ip: group.ip,
    user: group.users[0] || {},
    users: group.users
  }));
  action.total = Object.keys(ipGroups).length;
}

const allowIP = async (row: any) => {
  if (!action.list.length) return ToastWarning('请选择IP')
  const ip = row.ip;
  ElMessageBox.confirm('确认解封该IP吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    await numberApi.removeIpForbid({ip}).then(() => {
      ToastSuccess(`IP解封成功`)
      getList()
    }).catch(() => {
      ToastWarning(`IP解封失败`)
    })
  }).catch(() => {})

}
const openDialog = () => {
  action.dialogFormVisible = true
  getList()
}

const closeDialog = () => {
  action.dialogFormVisible = false
}
defineExpose({
  openDialog
})
</script>

<template>
  <el-dialog
    top="10vh"
    class="xm-dialog input-width"
    v-model="action.dialogFormVisible"
    width="70%"
    title="IP禁用列表">
    <div class="xm-content" style="height:60vh!important;overflow-y: auto;">
      <el-table class="xm-TableCenter" :data="action.list" border>
        <el-table-column min-width="200" prop="ip" label="IP"/>
        <el-table-column width="140" prop="user.user_id" label="用户ID"/>
        <el-table-column width="140" prop="user.uuid" label="用户UUID"/>
        <el-table-column width="140" prop="user.nickname" label="昵称"/>
        <el-table-column width="140" label="操作" prop="ip">
          <template #default="{ row }">
            <el-button type="success" size="mini" @click="allowIP(row)">解封</el-button>
          </template>
        </el-table-column>
        <el-table-column type="expand">
          <template #default="{ row }">
            <div style="left: 0;position: relative;text-align: left">
              <el-table :data="row.users" border :show-header="false">
                <el-table-column min-width="200" prop="ip"/>
                <el-table-column width="140" prop="user_id"/>
                <el-table-column width="140" prop="uuid"/>
                <el-table-column width="140" prop="nickname"/>
                <el-table-column width="140"/>
                <el-table-column width="50"/>
              </el-table>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-dialog>
</template>
<style>
</style>
